<template>
  <div class="about">
    <div class="tableTop">
        <el-button @click="showAddApp" class="innerblock">添加</el-button>
        <el-input class="innerblock el-input2" v-model="input" placeholder="根据名字、appid模糊查询" @change="findApp"></el-input>
        <el-button @click="findApp" class="innerblock">查找</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%;">
      <el-table-column
        prop="clientId"
        label="clientId">
      </el-table-column>
      <el-table-column
        prop="name"
        label="项目名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="lid"
        label="用户号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userEmail"
        label="用户邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="redirectUri"
        label="redirectUri"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updatedAt"
        label="修改时间">
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            @click="handleExport(scope.$index, scope.row)">导出</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title=""
      :visible.sync="addDialogVisible"
      width="40%">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="appId" prop="appId">
            <el-input v-model="addForm.clientId"></el-input>
          </el-form-item>
          <el-form-item label="项目名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="clientSecret" prop="clientSecret">
            <el-input v-model="addForm.clientSecret"></el-input>
          </el-form-item>
          <el-form-item label="redirectUri" prop="redirectUri">
            <el-input v-model="addForm.redirectUri"></el-input>
          </el-form-item>
          <el-form-item label="url" prop="url">
            <el-input v-model="addForm.url"></el-input>
          </el-form-item>
          <el-form-item label="publicKey" prop="publicKey">
            <el-input v-model="addForm.publicKey"></el-input>
          </el-form-item>
          <el-form-item label="privateKey" prop="privateKey">
            <el-input v-model="addForm.privateKey"></el-input>
          </el-form-item>
          <el-form-item label="lid" prop="lid">
            <el-input v-model="addForm.lid"></el-input>
          </el-form-item>
          <el-form-item label="userEmail" prop="userEmail">
            <el-input v-model="addForm.userEmail"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">立即创建</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title=""
      :visible.sync="detailDialogVisible"
      width="40%">
      <el-form :model="detailForm" :rules="rules" ref="detailForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="clientId" prop="clientId">
            <el-input v-model="detailForm.clientId" disable=true></el-input>
          </el-form-item>
          <el-form-item label="项目名" prop="name">
            <el-input v-model="detailForm.name"></el-input>
          </el-form-item>
          <el-form-item label="clientSecret" prop="clientSecret">
            <el-input v-model="detailForm.clientSecret"></el-input>
          </el-form-item>
          <el-form-item label="redirectUri" prop="redirectUri">
            <el-input v-model="detailForm.redirectUri"></el-input>
          </el-form-item>
          <el-form-item label="url" prop="url">
            <el-input v-model="detailForm.url"></el-input>
          </el-form-item>
          <el-form-item label="publicKey" prop="publicKey">
            <el-input v-model="detailForm.publicKey"></el-input>
          </el-form-item>
          <el-form-item label="privateKey" prop="privateKey">
            <el-input v-model="detailForm.privateKey"></el-input>
          </el-form-item>
          <el-form-item label="lid" prop="lid">
            <el-input v-model="detailForm.lid"></el-input>
          </el-form-item>
          <el-form-item label="userEmail" prop="userEmail">
            <el-input v-model="detailForm.userEmail"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="edit('detailForm')">修改</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="page.size"
      :disabled="page.hide"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.count">
    </el-pagination>
  </div>
</template>
<script>

// import axios from 'axios'
import {getInstance} from '@/utils/request'
const instance = getInstance();
export default {
  mounted: function () {
    this.getData()
  },
  methods: {
    handleSizeChange(size) {
      this.page.size = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page.page = page;
      this.getData();
    },
    edit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.detailDialogVisible = false;
          delete this.detailForm.publicKey; // 暂时禁用这个功能
          delete this.detailForm.privateKey;
          instance.put('/managerapi/clients/' + this.detailForm.id, this.detailForm).then(res => {
            if(res.data &&res.data.result === 0) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getData();
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(() => {
            this.$message.error('修改失败')
          })
        } else {
          return false;
        }
      });   
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addDialogVisible = false;
          delete this.addForm.publicKey; // 暂时禁用这个功能
          delete this.addForm.privateKey;
          instance.post('/managerapi/clients', this.addForm).then(res => {
            if(res.data &&res.data.result === 0) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.getData();
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(() => {
            this.$message.error('添加失败')
          })
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.addForm = {
        name: '',
        appid: '',
        manager: 0,
      };
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    showAddApp () {
      this.addDialogVisible = true;
    },
    findApp () {
      const content = this.input;
      instance.get(`/managerapi/clients?content=${content}`).then(res => {
        if(res.data && res.data.result === 0) {
          this.tableData = res.data.rows;
          this.page.count = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(() => {
        this.$message.error('请求失败')
      });
    },
    handleDelete (index, row) {
      this.$confirm('确认删除？')
      .then(() => {
        this.tableData.splice(index, 1)
        this.page.count--;
        const id = row.id;
        instance.delete('/managerapi/clients/' + id).then(res => {
          if(res.data && res.data.result === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else{
            this.$message.error(res.data.msg);
          }
        })
      })
      .catch(() => {
        this.$message.error('请求失败')
      });
    },
    getData () {
      this.page.hide = false;
      instance.get(`/managerapi/clients?page=${this.page.page}&size=${this.page.size}`).then(res => {
        if(res.data && res.data.result === 0) {
          this.tableData = res.data.rows;
          this.page.count = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      },() => {
        this.$message.error('请求失败')
      })
    },
    handleExport (index, row) {
      const content = `导出应用\n client_id: ${row.clientId}\n secret: ${row.clientSecret} publickey: ${row.publicKey}`
      this.copyToClip(content)
    },
    handleDetail (index, row) {
      this.detailForm = Object.assign({}, row);
      this.detailDialogVisible = true;
    },
    copyToClip (content, message) {
      var aux = document.createElement('input')
      aux.setAttribute('value', content)
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      if (message == null) {
        this.$message('复制成功')
      } else {
        alert(message)
      }
    }
  },
  data () {
    return {
      page: {
        count: 10,
        size: 10,
        page: 1,
        hide: false,
      },
      addForm: {
      },
      detailForm: {
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { max: 20, message: '长度最多 20 个字符', trigger: 'blur' }
        ],
        clientId: [
          { required: false,max: 12, min: 12, message: '请输入clientId', trigger: 'blur' },
        ],
        url: [
          { required: true,type: 'url', message: '请输入url格式地址', trigger: 'blur' }
        ],
        redirectUri: [
          { required: true, type: 'url', message: '请输入url格式回调地址', trigger: 'blur' }
        ],
        lid: [
          { required: true, message: '请输入管理员号', trigger: 'blur' }
        ],
        userEmail: [
          { required: true, type: 'email',message: '请输入管理员邮箱', trigger: 'blur' }
        ]
      },
      input: '',
      addDialogVisible: false,
      detailDialogVisible: false,
      tableData: [],
    }
  }
}
</script>

<style>
.tableTop{
  height: 50px;
}
.innerblock{
  height:40px;
  float: left;
}

.tableTop .el-input2{
	width: 250px;
  line-height: 40px;
}
.detailDialog .el-row{
  line-height: 40px
}
</style>